<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>attribute.jsp</title>
<script>

function init(){
	
	var btnAtt=document.querySelector("#btnAtt");
	var btnChange=document.querySelector("#btnChange");
	var rs=document.querySelector("#result");
	
	
	btnAtt.onclick=function(){
		
		//NODE가져오기(태그선택)
		var node=document.querySelector('#myName');
		var temp='<li> Color : '+ node.getAttribute('color');
		temp += '<li>Size : ' + node.getAttribute('size');
		temp += '<li>Text : ' + node.innerHTML;
		
		rs.innerHTML = temp;
	}
	
	btnChange.onclick=function(){
		var node=document.querySelector("#myName");
		node.innerHTML='홍길동';
		
		//style로 변경
/* 		node.style.color='#0000ff';
		node.style.fontSize='40px';
		 */
		//attribute로 변경
		node.setAttribute('color','#00ff00');
		node.setAttribute('size','100px');
	
	
	}
	
}


</script>



</head>
<body>

<font color='#aabbcc' size='5px' id='myName'>이미선</font>
<input type="button" value='GET ATTRIBUTE' ID='btnAtt'>
<input type="button" value='CHANGE ATTRIBUTE' ID='btnChange'>
<p/>

<div id='result'></div>
<script>init()</script>
</body>
</html>